<template>
    <view class="custom-content">
        <search-box
            placeholderText="请输入销售组织名称"
            :searchValue="marketingSearchVal"
            @changeSearchVal="changeSearchVal"
            @searchFn="searchFn" />
        <view class="content-wrapper">
            <mescroll-uni
                ref="mescrollRef"
                @init="mescrollInit"
                :fixed="false"
                :up="upOption"
                @down="downRefresh"
                @up="getNewData">
                <checkbox-group @change="checkboxChange">
                    <label class="content-item" v-for="item in marketingList" :key="String(item.OrganizationsNo)">
                        <view class="">{{ item.OrganizationsName }}</view>
                        <checkbox
                            :value="String(item.OrganizationsNo)"
                            :checked="item.isSelected"
                            style="transform: scale(0.7)" />
                    </label>
                </checkbox-group>
            </mescroll-uni>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex"
import {
    CHANGE_MARKETING_SEARCH_VAL,
    CHANGE_MARKETING_CHECKED,
    CHANGE_MARKETING_LIST,
    CHANGE_MARKETING_SELECTED,
} from "@/store/mutation-type.js"
import { setReduce } from "@/utils/utils.js"

export default {
    data() {
        return {
            pageNumber: 1,
            pageSize: 20,
        }
    },
    computed: {
        ...mapState("report", ["marketingList", "marketingSearchVal", "selectedMarketing"]),
    },
    created() {
        this[CHANGE_MARKETING_SEARCH_VAL]("")
    },
    mounted() {
        uni.$on("resetMarketing", this.downRefresh)
    },
    unmounted() {
        uni.$off("resetMarketing", this.downRefresh)
    },
    methods: {
        ...mapMutations("report", [
            CHANGE_MARKETING_LIST,
            CHANGE_MARKETING_SEARCH_VAL,
            CHANGE_MARKETING_CHECKED,
            CHANGE_MARKETING_SELECTED,
        ]),
        ...mapActions("report", ["fetchMarketingList"]),
        searchFn(val) {
            this.changeSearchVal(val)
            this.resetCustomList()
            this.mescroll.scrollTo(0, 0)
            this.mescroll.resetUpScroll()
        },
        resetCustomList() {
            this[CHANGE_MARKETING_LIST]([])
        },
        checkboxChange(e) {
            const selectedMarketing = this.marketingList.filter((item) => e.detail.value.includes(item.OrganizationsNo))
            const newCustoms = this.selectedMarketing.concat(selectedMarketing)
			console.log(selectedMarketing)
			console.log(newCustoms)
			console.log(e.detail.value)
            this[CHANGE_MARKETING_CHECKED](e.detail.value)
            this[CHANGE_MARKETING_SELECTED](setReduce(newCustoms, "OrganizationsNo"))
        },
        changeSearchVal(val) {
            this[CHANGE_MARKETING_SEARCH_VAL](val)
        },
        getCustomList() {
            const params = {
                pageNumber: this.pageNumber,
                pageSize: this.pageSize,
                fullName: this.marketingSearchVal,
            }
            this.fetchMarketingList(params).then((res) => {
                if (res.State == 1) {
                    this.mescroll.endByPage(res.Data.length, res.TotalAmout)
                } else {
                    this.mescroll.endErr()
                }
            })
        },
        // 上拉加载
        getNewData(page) {
            this.pageNumber = page.num
            this.getCustomList()
        },
        // 下拉刷新
        downRefresh() {
            this.changeSearchVal("")
            this.mescroll.scrollTo(0, 0)
            this.mescroll.resetUpScroll()
        },
    },
}
</script>

<style lang="scss">
.custom-content {
    height: 100%;
    padding-top: 88rpx;

    .content-wrapper {
        height: calc(100vh - 120rpx - 72rpx);

        .content-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 28rpx;
            min-height: 78rpx;
            margin-left: 28rpx;
            margin-right: 24rpx;
            border-bottom: 1rpx solid $uni-border-bottom-color;
        }

        ::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
            color: $app-color-main;
        }

        ::v-deep uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
            border-color: $app-color-main;
        }
    }
}
</style>
